<template>
  <div>
    <!-- <div class="content" v-for="item in " key="item.id"> -->
    <div class="content">
        <div class="time">
            <div>
                <span>下单时间：2023-03-24 13:58:27</span>
                <span>订单编号：1639144625648177153</span>
            </div>
            <span>
                <van-icon name="clock-o" />
                付款截止：03分41秒
                <!-- <van-count-down time="{{ time }}" /> -->
            </span>
        </div>
        <div class="orderMain">
            <ul>
                <li>
                    <img :src=data.picture alt="">
                    <div>
                        <p>{{data.name}}</p>
                        <span>{{ data.attrsText }}</span>
                    </div>
                </li>
                <li>
                    ￥{{ data.price }}
                </li>
                <li>
                    ×{{ data.count }}
                </li>
                <li>
                    待付款
                </li>
                <li>
                    <p>￥{{ data.payPrice }}</p>
                    <p>(含运费:￥4)</p>
                    <p>在线支付</p>
                </li>
               <li>
                    <button>立即付款</button>
                    <p @click="toOrderDetail">查看详情</p>
                    <p>取消订单</p>
               </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    props:["data"],
    name:'OrderMain',
    components:{
    },
    mounted(){
        console.log(this.data)
    },
    methods:{
        toOrderDetail(){
            this.$router.push("/ContentView/detail")
        }
    }
}
</script>

<style lang="less" scoped>
    .content{
        width: 100%;
        // height: 1478px;
        // background: aqua;
        margin-top: 26px;
        font-size: 14px;
        // position: absolute;
        // top: 0;left: 0;

        .time{
            box-sizing: border-box;
            width: 940px;
            margin: 0 30px; 
            display: flex;
            justify-content: space-between;
            margin-bottom: 24px;
            div span{
                margin: 10px;
            }
        }
        .orderMain{
            margin: 0 28px;
            ul{
                width: 100%;
                
                li{
                    font-size: 14px;
                    text-align: center;
                    float: left;
                    line-height: 32px;
                }
                li:nth-child(1){
                    width: 282px;
                    display: flex;
                    text-align:left;
                    justify-content: space-evenly;
                    margin-right: 47px;
                    img{
                        width: 70px;
                        height: 70px;
                        // background: aqua;
                        margin: 5px;
                    }
                    div{
                        span{
                            color: #999999;
                            font-size: 12px;
                        }
                    }
                }
                li:nth-child(2){
                    width: 40px;
                    margin-right: 47px;
                }
                li:nth-child(3){
                    width: 20px;
                    margin-right: 86px;
                }
                li:nth-child(4){
                    width: 45px;
                    margin-right: 98px;
                }
                li:nth-child(5){
                    width: 85px;
                    margin-right: 78px;
                    p{
                        margin-bottom: 14px;
                    }
                    p:nth-child(1){
                        color: #cf4444;
                        line-height: 32px;
                    }
                }
                li:nth-child(6){
                    width: 100px;
                    button{
                        width: 100px;
                        height: 32px;
                        border-radius: 7px;
                        border: none;
                        color: #fff;
                        background: #27ba9b;
                        margin-bottom: 14px;
                    }
                    p{
                        margin-bottom: 14px;
                    }
                }
            }
        }
    }
</style>